<template>
  <span>{{ tweeningValue }}</span>
</template>
<script>
  import TWEEN from 'tween'
  export default {
    name: 'animationItem',
    props: {
      value: {
        type: Number,
        required: true
      }
    },
    data () {
      return {
        tweeningValue: 0
      }
    },
    mounted () {
      console.log('mounted', this.value)
      this.tween(0, this.value)
    },
    watch: {
      value: function (newValue, oldValue) {
        console.log('watch', oldValue)
        this.tween(oldValue, newValue)
      }
    },
    methods: {
      tween: function (startValue, endValue) {
        console.log('tween', startValue, endValue)
        var vm = this

        console.log('tween startValue', startValue)
        console.log('tween endValue', endValue)
        function animate () {
          requestAnimationFrame(animate)
          TWEEN.update()
        }
        new TWEEN.Tween({ tweeningValue: parseInt(startValue) })
                .to({ tweeningValue: parseInt(endValue) }, 500)
                .onUpdate( function () {console.log(startValue,endValue,this.tweeningValue); vm.tweeningValue = parseInt(this.tweeningValue.toFixed(0)) })
                .start()
        animate()
      }
    }
  }
</script>
